<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧社区管理系统 - 费用管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --text-color: #333;
            --border-color: #ddd;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Noto Sans SC', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 0;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 100;
        }
        
        .header h1 {
            font-weight: 500;
            margin: 0;
            font-size: 1.8rem;
        }
        
        /* 导航栏样式 */
        .nav {
            background-color: white;
            padding: 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 99;
        }
        
        .nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        
        .nav ul li {
            position: relative;
        }
        
        .nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            padding: 15px 25px;
            display: block;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .nav ul li a:hover,
        .nav ul li a.active {
            color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .nav ul li a.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        /* 主内容区样式 */
        .main-content {
            display: flex;
            margin-top: 20px;
            gap: 20px;
        }
        
        .sidebar {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            height: fit-content;
            position: sticky;
            top: 80px;
        }
        
        .sidebar h3 {
            color: var(--dark-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .sidebar-menu {
            list-style: none;
            margin-bottom: 25px;
        }
        
        .sidebar-menu li {
            margin-bottom: 8px;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 6px;
            transition: var(--transition);
        }
        
        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }
        
        .sidebar-menu i {
            width: 24px;
            text-align: center;
            font-size: 1.1rem;
        }
        
        .content {
            flex: 1;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 25px;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .card-header h2 {
            color: var(--dark-color);
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 1rem;
            transition: var(--transition);
            font-family: inherit;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 1em;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            font-family: inherit;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }
        
        .btn-outline:hover {
            background-color: var(--light-color);
            transform: translateY(-2px);
        }
        
        .btn-sm {
            padding: 8px 16px;
            font-size: 0.9rem;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        /* 表单布局 */
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-col {
            flex: 1;
        }
        
        /* 必填标记 */
        .required {
            color: var(--danger-color);
            margin-left: 4px;
        }
        
        /* 筛选器 */
        .filter-bar {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .filter-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .filter-actions {
            display: flex;
            gap: 10px;
        }
        
        .filter-group {
            margin-bottom: 15px;
        }
        
        /* 日期范围水平排列 */
        .date-range {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .date-range span {
            color: #777;
            min-width: 20px;
            text-align: center;
            font-size: 0.9em;
        }
        
        .date-range input {
            flex: 1;
            padding: 10px 12px;
            font-size: 0.9em;
        }
        
        /* 费用表单 */
        .fee-form {
            background: linear-gradient(to bottom, #f9fbfd, #ffffff);
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .table th, .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        
        .table tr:hover {
            background-color: #f5f7fa;
        }
        
        /* 徽章样式 */
        .badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .badge-success {
            background-color: rgba(46, 204, 113, 0.15);
            color: var(--success-color);
        }
        
        .badge-warning {
            background-color: rgba(243, 156, 18, 0.15);
            color: var(--warning-color);
        }
        
        .badge-danger {
            background-color: rgba(231, 76, 60, 0.15);
            color: var(--danger-color);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                position: relative;
                top: 0;
            }
            
            .form-row {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        @media (max-width: 768px) {
            .date-range {
                flex-direction: column;
                align-items: stretch;
                gap: 5px;
            }
            
            .date-range span {
                margin: 5px 0;
                padding: 5px;
            }
            
            .nav ul {
                flex-wrap: wrap;
            }
            
            .nav ul li a {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
            
            .btn {
                padding: 10px 16px;
            }
            
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .card-header > div {
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 通知 */
        .notification {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            background-color: rgba(46, 204, 113, 0.1);
            border-left: 4px solid var(--success-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: fadeIn 0.4s ease;
        }
        
        .notification.warning {
            background-color: rgba(243, 156, 18, 0.1);
            border-left-color: var(--warning-color);
        }
        
        .notification.danger {
            background-color: rgba(231, 76, 60, 0.1);
            border-left-color: var(--danger-color);
        }
        
        .notification.hidden {
            display: none;
        }
        
        /* 图标样式 */
        .icon-box {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        
        /* 加载效果 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 表单标签 */
        .form-label {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .form-label .required {
            margin-left: 5px;
            font-size: 0.9rem;
        }
        
        /* 选项卡内容 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            display: flex;
            align-items: center;
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.5rem;
            color: white;
        }
        
        .stat-icon.primary {
            background-color: var(--primary-color);
        }
        
        .stat-icon.success {
            background-color: var(--success-color);
        }
        
        .stat-icon.warning {
            background-color: var(--warning-color);
        }
        
        .stat-icon.danger {
            background-color: var(--danger-color);
        }
        
        .stat-info h3 {
            font-size: 1.8rem;
            margin: 0;
            color: var(--dark-color);
        }
        
        .stat-info p {
            margin: 5px 0 0;
            color: #777;
        }
        
        /* 图表容器 */
        .chart-container {
            height: 300px;
            margin: 20px 0;
            background: #f9f9f9;
            border-radius: 8px;
            position: relative;
        }
        
        .chart-wrapper {
            height: 100%;
            padding: 15px;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-top: 20px;
        }
        
        .pagination .btn {
            min-width: 40px;
            padding: 8px 12px;
        }
        
        .pagination .btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-building"></i> 智慧社区管理系统</h1>
    </div>
    <div class="nav">
        <ul>
            <li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
            <li><a href="#"><i class="fas fa-users"></i> 住户管理</a></li>
            <li><a href="#"><i class="fas fa-home"></i> 房产管理</a></li>
            <li><a href="#"><i class="fas fa-tools"></i> 报修维护</a></li>
            <li><a href="#" class="active"><i class="fas fa-money-bill-wave"></i> 费用管理</a></li>
            <li><a href="#"><i class="fas fa-shield-alt"></i> 社区安防</a></li>
            <li><a href="#"><i class="fas fa-mobile-alt"></i> 移动端</a></li>
        </ul>
    </div>
    
    <div class="container">
        <div class="notification hidden" id="actionNotification">
            <div><i class="fas fa-info-circle"></i> <span id="notificationText">操作成功</span></div>
            <button class="btn btn-sm btn-outline" onclick="closeNotification()">关闭</button>
        </div>
        
        <div class="main-content">
            <div class="sidebar">
                <h3><i class="fas fa-money-bill-wave"></i> 费用管理</h3>
                <ul class="sidebar-menu">
                    <li><a href="#" class="active" data-tab="fee-list"><i class="fas fa-list"></i> 费用列表</a></li>
                    <li><a href="#" data-tab="fee-add"><i class="fas fa-plus"></i> 添加费用</a></li>
                    <li><a href="#" data-tab="fee-statistics"><i class="fas fa-chart-bar"></i> 统计分析</a></li>
                </ul>
                
                <h3><i class="fas fa-filter"></i> 筛选器</h3>
                <div class="filter-bar">
                    <div class="filter-group">
                        <label>费用类型</label>
                        <select class="form-control" id="filterType">
                            <option value="all">所有类型</option>
                            <option value="property">物业管理费</option>
                            <option value="parking">停车费</option>
                            <option value="utility">水电费</option>
                            <option value="gas">燃气费</option>
                            <option value="repair">维修基金</option>
                            <option value="other">其他费用</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>缴费状态</label>
                        <select class="form-control" id="filterStatus">
                            <option value="all">所有状态</option>
                            <option value="unpaid">未缴费</option>
                            <option value="paid">已缴费</option>
                            <option value="overdue">已逾期</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>日期范围</label>
                        <div class="date-range">
                           <input type="date" class="form-control" id="startDate" value="2025-05-01">
                           <span>至</span>
                           <input type="date" class="form-control" id="endDate" value="2025-06-20">
                       </div>
                    </div>
                    <button class="btn btn-primary btn-block" onclick="applyFilters()">
                        <i class="fas fa-check"></i> 应用筛选
                    </button>
                </div>
            </div>
            
            <div class="content">
                <!-- 费用列表 -->
                <div id="fee-list" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h2><i class="fas fa-list"></i> 费用列表</h2>
                            <div>
                                <button class="btn btn-outline"><i class="fas fa-filter"></i> 高级筛选</button>
                                <button class="btn btn-primary"><i class="fas fa-download"></i> 导出</button>
                            </div>
                        </div>
                        
                        <div class="stats-container">
                            <div class="stat-card">
                                <div class="stat-icon primary">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥156,230</h3>
                                    <p>本月总收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon success">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>92%</h3>
                                    <p>缴费率</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>8</h3>
                                    <p>逾期未缴</p>
                                </div>
                            </div>
                        </div>
                        
                        <div style="overflow-x: auto;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>费用编号</th>
                                        <th>住户信息</th>
                                        <th>费用类型</th>
                                        <th>金额</th>
                                        <th>生成日期</th>
                                        <th>缴费状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>FE2025062001</td>
                                        <td>张三 (A栋502)</td>
                                        <td>物业管理费</td>
                                        <td>¥1,250.00</td>
                                        <td>2025-06-01</td>
                                        <td><span class="badge badge-success">已缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>FE2025062002</td>
                                        <td>李四 (B栋1203)</td>
                                        <td>停车费</td>
                                        <td>¥350.00</td>
                                        <td>2025-06-05</td>
                                        <td><span class="badge badge-warning">未缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>FE2025062003</td>
                                        <td>王五 (C栋806)</td>
                                        <td>水电费</td>
                                        <td>¥285.50</td>
                                        <td>2025-06-10</td>
                                        <td><span class="badge badge-success">已缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline"><i class="fas fa-print"></i> 打印</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>FE2025062004</td>
                                        <td>赵六 (D栋1502)</td>
                                        <td>物业管理费</td>
                                        <td>¥1,450.00</td>
                                        <td>2025-06-03</td>
                                        <td><span class="badge badge-danger">已逾期</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-primary"><i class="fas fa-bell"></i> 催缴</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>FE2025062005</td>
                                        <td>孙七 (E栋302)</td>
                                        <td>维修基金</td>
                                        <td>¥500.00</td>
                                        <td>2025-06-15</td>
                                        <td><span class="badge badge-warning">未缴费</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline"><i class="fas fa-edit"></i> 编辑</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                            <div>显示 1 到 5 项，共 126 项</div>
                            <div class="pagination">
                                <button class="btn btn-outline"><i class="fas fa-chevron-left"></i></button>
                                <button class="btn btn-outline active">1</button>
                                <button class="btn btn-outline">2</button>
                                <button class="btn btn-outline">3</button>
                                <button class="btn btn-outline">...</button>
                                <button class="btn btn-outline">25</button>
                                <button class="btn btn-outline"><i class="fas fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 添加费用 -->
                <div id="fee-add" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h2><i class="fas fa-plus-circle"></i> 添加费用</h2>
                        </div>
                        
                        <div class="fee-form">
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            住户信息 <span class="required">*</span>
                                        </div>
                                        <select class="form-control" id="residentSelect">
                                            <option value="">选择住户...</option>
                                            <option value="1">张三 (A栋502)</option>
                                            <option value="2">李四 (B栋1203)</option>
                                            <option value="3">王五 (C栋806)</option>
                                            <option value="4">赵六 (D栋1502)</option>
                                            <option value="5">孙七 (E栋302)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            费用类型 <span class="required">*</span>
                                        </div>
                                        <select class="form-control" id="feeType">
                                            <option value="">选择费用类型...</option>
                                            <option value="property">物业管理费</option>
                                            <option value="parking">停车费</option>
                                            <option value="utility">水电费</option>
                                            <option value="gas">燃气费</option>
                                            <option value="repair">维修基金</option>
                                            <option value="other">其他费用</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            费用金额 <span class="required">*</span>
                                        </div>
                                        <div style="display: flex; align-items: center;">
                                            <span style="background: #f5f7fa; padding: 12px 15px; border: 1px solid #ddd; border-right: none; border-radius: 6px 0 0 6px;">¥</span>
                                            <input type="number" class="form-control" id="feeAmount" placeholder="输入金额" style="border-radius: 0 6px 6px 0; border-left: none;">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            费用周期
                                        </div>
                                        <select class="form-control" id="feePeriod">
                                            <option value="once">一次性费用</option>
                                            <option value="monthly">月度费用</option>
                                            <option value="quarterly">季度费用</option>
                                            <option value="yearly">年度费用</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class="form-label">
                                    费用说明
                                </div>
                                <textarea class="form-control" id="feeDescription" placeholder="输入费用说明...">物业管理费</textarea>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            生成日期
                                        </div>
                                        <input type="date" class="form-control" id="createDate" value="2025-06-20">
                                    </div>
                                </div>
                                <div class="form-col">
                                    <div class="form-group">
                                        <div class="form-label">
                                            缴费截止日期
                                        </div>
                                        <input type="date" class="form-control" id="dueDate" value="2025-07-05">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn btn-outline" onclick="resetForm()">
                                    <i class="fas fa-times"></i> 取消
                                </button>
                                <button class="btn btn-success" onclick="submitFee()">
                                    <i class="fas fa-check"></i> 提交费用
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 统计分析 -->
                <div id="fee-statistics" class="tab-content active">
                    <div class="card">
                        <div class="card-header">
                            <h2><i class="fas fa-chart-bar"></i> 费用统计分析</h2>
                            <div>
                                <select class="form-control" id="timeRange" onchange="updateCharts()" style="width: auto;">
                                    <option value="monthly">本月</option>
                                    <option value="quarterly">本季度</option>
                                    <option value="yearly">本年度</option>
                                    <option value="custom">自定义范围</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="stats-container">
                            <div class="stat-card">
                                <div class="stat-icon primary">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥156,230</h3>
                                    <p>总收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon warning">
                                    <i class="fas fa-home"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥98,450</h3>
                                    <p>物业费收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon success">
                                    <i class="fas fa-car"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥32,150</h3>
                                    <p>停车费收入</p>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon danger">
                                    <i class="fas fa-tint"></i>
                                </div>
                                <div class="stat-info">
                                    <h3>¥25,630</h3>
                                    <p>水电费收入</p>
                                </div>
                            </div>
                        </div>
                        
                        <h3 style="margin: 20px 0 10px;">月度费用分析</h3>
                        <div class="chart-container">
                            <div class="chart-wrapper">
                                <canvas id="monthlyChart"></canvas>
                            </div>
                        </div>
                        
                        <h3 style="margin: 20px 0 10px;">费用类型分布</h3>
                        <div class="chart-container">
                            <div class="chart-wrapper">
                                <canvas id="feeDistributionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化图表
        let monthlyChart = null;
        let feeDistributionChart = null;
        
        // 图表数据
        const monthlyData = {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '总收入 (¥)',
                data: [124500, 136800, 142300, 150200, 148600, 156230],
                borderColor: '#3498db',
                backgroundColor: 'rgba(52, 152, 219, 0.1)',
                borderWidth: 3,
                tension: 0.3,
                fill: true
            }]
        };
        
        const feeDistributionData = {
            labels: ['物业管理费', '停车费', '水电费', '燃气费', '维修基金', '其他费用'],
            datasets: [{
                data: [98450, 32150, 25630, 18500, 15300, 15200],
                backgroundColor: [
                    '#f39c12',
                    '#2ecc71',
                    '#e74c3c',
                    '#9b59b6',
                    '#1abc9c',
                    '#95a5a6'
                ]
            }]
        };
        
        // 初始化图表
        function initCharts() {
            // 月度费用趋势图
            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
            monthlyChart = new Chart(monthlyCtx, {
                type: 'line',
                data: monthlyData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `¥${context.parsed.y.toLocaleString()}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '¥' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
            
            // 费用类型分布图
            const distributionCtx = document.getElementById('feeDistributionChart').getContext('2d');
            feeDistributionChart = new Chart(distributionCtx, {
                type: 'pie',
                data: feeDistributionData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 20
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ¥${value.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }
        
        // 更新图表数据
        function updateCharts() {
            const timeRange = document.getElementById('timeRange').value;
            
            // 根据选择的时间范围更新数据
            if (timeRange === 'monthly') {
                monthlyData.labels = ['1月', '2月', '3月', '4月', '5月', '6月'];
                monthlyData.datasets[0].data = [124500, 136800, 142300, 150200, 148600, 156230];
            } else if (timeRange === 'quarterly') {
                monthlyData.labels = ['第一季度', '第二季度', '第三季度', '第四季度'];
                monthlyData.datasets[0].data = [403600, 455100, 482300, 498700];
            } else if (timeRange === 'yearly') {
                monthlyData.labels = ['2022年', '2023年', '2024年', '2025年'];
                monthlyData.datasets[0].data = [1523600, 1685400, 1839200, 2057000];
            }
            
            // 更新图表
            monthlyChart.update();
            feeDistributionChart.update();
        }
        
        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('actionNotification');
            const textElement = document.getElementById('notificationText');
            
            textElement.textContent = message;
            notification.className = 'notification ' + type;
            notification.classList.remove('hidden');
            
            // 3秒后自动关闭
            setTimeout(() => {
                notification.classList.add('hidden');
            }, 3000);
        }
        
        // 关闭通知
        function closeNotification() {
            document.getElementById('actionNotification').classList.add('hidden');
        }
        
        // 应用筛选
        function applyFilters() {
            // 获取筛选条件
            const feeType = document.getElementById('filterType').value;
            const status = document.getElementById('filterStatus').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            
            // 显示筛选结果
            const feeTypeText = document.getElementById('filterType').options[document.getElementById('filterType').selectedIndex].text;
            const statusText = document.getElementById('filterStatus').options[document.getElementById('filterStatus').selectedIndex].text;
            
            showNotification(`已应用筛选: 费用类型 - ${feeTypeText}, 状态 - ${statusText}, 日期范围: ${startDate} 至 ${endDate}`, 'success');
        }
        
        // 重置表单
        function resetForm() {
            document.getElementById('residentSelect').value = '';
            document.getElementById('feeType').value = '';
            document.getElementById('feeAmount').value = '';
            document.getElementById('feePeriod').value = 'once';
            document.getElementById('feeDescription').value = '物业管理费';
            
            // 重置日期为今天和7天后
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('createDate').value = formattedDate;
            
            const dueDate = new Date();
            dueDate.setDate(today.getDate() + 7);
            document.getElementById('dueDate').value = dueDate.toISOString().split('T')[0];
            
            showNotification('表单已重置', 'warning');
        }
        
        // 提交费用
        function submitFee() {
            const resident = document.getElementById('residentSelect').value;
            const feeType = document.getElementById('feeType').value;
            const amount = document.getElementById('feeAmount').value;
            
            // 验证必填字段
            if (!resident) {
                showNotification('请选择住户信息', 'danger');
                return;
            }
            
            if (!feeType) {
                showNotification('请选择费用类型', 'danger');
                return;
            }
            
            if (!amount || amount <= 0) {
                showNotification('请输入有效的费用金额', 'danger');
                return;
            }
            
            // 显示加载效果
            const submitBtn = document.querySelector('#fee-add .btn-success');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<span class="loading"></span> 处理中...';
            submitBtn.disabled = true;
            
            // 模拟API请求
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                
                // 显示成功消息
                const residentText = document.getElementById('residentSelect').options[document.getElementById('residentSelect').selectedIndex].text;
                const feeTypeText = document.getElementById('feeType').options[document.getElementById('feeType').selectedIndex].text;
                
                showNotification(`费用已成功提交！住户: ${residentText}, 类型: ${feeTypeText}, 金额: ¥${amount}`, 'success');
                
                // 重置表单
                resetForm();
            }, 1500);
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期为今天
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('createDate').value = formattedDate;
            
            // 设置截止日期为7天后
            const dueDate = new Date();
            dueDate.setDate(today.getDate() + 7);
            document.getElementById('dueDate').value = dueDate.toISOString().split('T')[0];
            
            // 添加菜单点击事件
            document.querySelectorAll('.sidebar-menu a').forEach(menuItem => {
                menuItem.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活动菜单
                    document.querySelectorAll('.sidebar-menu a').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 设置当前菜单为活动状态
                    this.classList.add('active');
                    
                    // 获取目标选项卡ID
                    const tabId = this.getAttribute('data-tab');
                    
                    // 隐藏所有选项卡内容
                    document.querySelectorAll('.tab-content').forEach(tab => {
                        tab.classList.remove('active');
                    });
                    
                    // 显示目标选项卡
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 初始化图表
            initCharts();
        });
    </script>
</body>
</html>